<!--
 * @Author: 
 * @Date: 2025-07-31 11:18:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-08-07 18:54:00
 * @Description: 这块 先只处理工作流的创作，该组件只做一件事，根据选择模式渲染对应组件
-->
<template>
  <view class="create-page">
    <scroll-view scroll-y class="scroll-box mb-10">
      <!-- 设计模板 -->
      <design-template />
      <!-- 图片上传 -->
      <image-upload-box />
      <!-- 提示词 -->
      <cue-word />
      <!-- 工具栏（生成数量） -->
      <generate-quantity />
    </scroll-view>

    <!-- 生成图片按钮 -->
    <view class="sticky-footer">
      <generate-footer @on-click-generate="onGenerate" />
    </view>

    <!-- FIXME:  全屏加载(放在这不太好，后续完善) -->
    <view
      :style="isShowLoading ? '' : 'display:none;'"
      class="w-full h-[100vh] z-9999 absolute top-0 left-0 flex flex-col items-center justify-center bg-[rgba(0,0,0,0.5)]"
    >
      <view class="flex justify-center items-center start-loading">
        <wd-img :src="StartIcon" width="80rpx" height="80rpx" />
      </view>
      <text class="text-[#fff] m-2 text-[28rpx]">任务创建中...</text>
    </view>
  </view>
</template>
<script lang="ts" setup>
import DesignTemplate from "./components/DesignTemplate.vue";
import ImageUploadBox from "./components/ImageUploadBox.vue";
import CueWord from "./components/CueWord.vue";
import GenerateQuantity from "./components/GenerateQuantity.vue";
import GenerateFooter from "./components/GenerateFooter.vue";
import { useWorkflowStore } from "@/store/index";
import WorkflowGenerator from "@/hooks/useWorkFlowGenerate";
import { storeToRefs } from "pinia";
import { WorkFlowTypeEnum } from "@/utils/enums";
import StartIcon from "@/static/svg/start-red.svg";

const workflowStore = useWorkflowStore();
const { workflowType, templateChooseObj, imageObj, imageParameters, cueWordObj, batchSize } =
  storeToRefs(workflowStore);

const isShowLoading = ref(false);

// 生成图片
const onGenerate = async () => {
  if (!imageObj.value.baseImgUrl) {
    uni.showToast({
      icon: "none",
      title:
        workflowType.value === WorkFlowTypeEnum.INSPIRATION_MOVE
          ? "请先上传方案意向图片"
          : "请先上传基本控制图片",
    });
    return;
  }
  const workflowInstance = new WorkflowGenerator({
    workflowType: workflowType.value,
    templateChooseObj: templateChooseObj.value,
    imageObj: imageObj.value,
    imageParameters: imageParameters.value,
    cueWordObj: cueWordObj.value,
    batchSize: batchSize.value,
  });
  isShowLoading.value = true;

  try {
    await workflowInstance.generate();
    uni.switchTab({
      url: "/pages/aiDraw/index",
    });
  } catch (err) {
    console.error(err);
    uni.showToast({
      icon: "error",
      title: "任务创建失败",
    });
  } finally {
    isShowLoading.value = false;
  }
};
onLoad((option) => {
  uni.setNavigationBarTitle({
    title: `${option?.tab}-${option?.title}`,
  });

  workflowStore.setWorkflowType(option?.key);
});
</script>
<style lang="scss" scoped>
.create-page {
  @apply relative bg-[#f6f6f7];
  .scroll-box {
    box-sizing: border-box;
    height: calc(100vh - 140rpx);
    /* #ifndef H5 */
    padding: 0 0 24rpx 0;
    /* #endif */
    /* #ifdef H5 */
    padding-bottom: 90rpx;
    /* #endif */
  }
  .sticky-footer {
    @apply bg-[#222222] box-border;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 32rpx;
    /* 适配 iPhoneX 等安全区域 */
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
  }
}

.start-loading {
  animation: rotation-process 2.4s linear infinite;
}

@keyframes rotation-process {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
